<template>
  <div id="app" style="text-align: center;">
    <LoginPage v-if="routerPath === '/login'"></LoginPage>
    <!--后台主页-->
    <div v-else style="display: flex;">
      <!--左边菜单-->
      <MenuSideBar></MenuSideBar>
      <!--右边主内容-->
      <div style="display: flex; flex-direction: column; min-width: 800px; width: 100vw">
        <Header></Header>
        <div class="main" style="padding:0 10px">
          <TestPage v-if="routerPath === '/test'"></TestPage>
          <IndexPage v-else-if="routerPath === '/index'"> </IndexPage>
          <UserAdmin v-else-if="routerPath === '/userAdmin'"></UserAdmin>
          <GoodsCategoryAdmin v-else-if="routerPath === '/goodsCategoryAdmin'"></GoodsCategoryAdmin>
          <GoodsAdmin v-else-if="routerPath === '/goodsAdmin'"></GoodsAdmin>
          <OrderAdmin v-else-if="routerPath === '/orderAdmin'"></OrderAdmin>
          <ShopConfig v-else-if="routerPath === '/shopConfig'"></ShopConfig>
          <MonitorPage v-else-if="routerPath === '/monitor'"/>
          <div v-else>
            <h1>{{ routerPath }}</h1>
          </div>
        </div>
      </div>
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import LoginPage from "./components/login"
import TestPage from "./components/test"
import IndexPage from "./components/index"
import MenuSideBar from "./components/layout/menuSideBar";
import Header from "./components/layout/header"
import Footer from "./components/layout/footer"
import UserAdmin from "./components/userAdmin"
import GoodsCategoryAdmin from "./components/goodsCategoryAdmin"
import GoodsAdmin from "./components/goodsAdmin/index"
import OrderAdmin from "./components/orderAdmin/index"
import ShopConfig from "./components/shopConfig"
import MonitorPage from "./components/monitor"

export default {
  components: {
    LoginPage, TestPage,IndexPage, MenuSideBar, Header, Footer,
    UserAdmin, GoodsCategoryAdmin, GoodsAdmin, OrderAdmin, ShopConfig,MonitorPage
  },
  data() {
    return {}
  },
  computed: {
    routerPath() {
      return this.$store.getters.routerPath
    }
  },
  mounted() {
    let userInfo = this.$store.getters.userInfo
    let token = window.localStorage.getItem("token")
    if (userInfo == null || userInfo.id == null || userInfo.id === 0 || token == null) {
      console.log("未登录，跳转到登录页面, userInfo:", userInfo, ", token=" + token)
      this.$store.commit("setRouterPath", "/login")
    }
  },
  methods: {
    goTo(routerPath) {
      this.$store.commit("setRouterPath", routerPath)
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #000;
}

.borderBlack {
  border: 1px solid black;
}
</style>
